<template>
	<view class="forgetPwd">
		<!-- 输入手机号 -->
		<view class="step" v-if="step == '0'">
			<view class="step-title">输入账号</view>
			<view class="step-box">
				<view class="occupy"></view>
				<view class="step-box-inputBox"><input type="text" v-model="phone" class="step-box-input" value="" placeholder="请输入要重置密码的手机号" /></view>
				<button class="primary step-box-btn" @click="next(phone)">下一步</button>
			</view>
		</view>
		<!-- 输入验证码 -->
		<view class="step" v-if="step == '1'">
			<view class="step-title">通过安全手机</view>
			<view class="step-box">
				<view class="step-box-cont">
					您可以通过安全手机进行帐号修复：
					<br />
					点击获取验证码，短信将发送至安全手机*******{{afterPhone}}
				</view>
				<view class="step-box-inputBox">
					<input type="text" class="step-box-input" v-model="code" value="" placeholder="请输入验证码" />
					<text v-if="coedText == 0" @click="getCode">获取手机号</text>
					<text v-if="coedText != 0" style="color: #e3e3e3;margin-right:20px;">{{ coedText }}</text>
				</view>
				<button class="primary step-box-btn" @click="confirmCode(1)">下一步</button>
			</view>
		</view>
		<!-- 输入新密码 -->
		<view class="step" v-if="step == '2'">
			<view class="step-title">设置新密码</view>
			<view class="step-box">
				<view class="step-box-cont">
					请设置*******{{afterPhone}}
					<b class="blue"></b>
					的新密码，建议使用数字 字母 字符的混合方式，提高密码安全等级。
				</view>
				<view class="step-box-inputBox"><input type="password" class="step-box-input" v-model="password" value="" placeholder="8-10位密码，区分大小写" /></view>
				<button class="primary step-box-btn" @click="confirmCode()">确定</button>
			</view>
		</view>
		<!-- 重置成功 -->
		<view class="step" v-if="step == '3'">
			<view class="step-title">重置密码</view>
			<view class="step-box">
				<image  class="step-img" src="../static/image/chenggong.png" mode=""></image>
				<view class="step-text">重置密码成功</view>
				<button class="primary step-box-btnn" @click="toReturn()">返回</button>
			</view>
		</view>
	</view>
</template>

<script>
export default {
	components: {},
	data() {
		return {
			step: '0',
			phone: 17662922882,
			code: '',
			password:'',
			isNext: false,
			coedText: '0',
			afterPhone:''
		};
	},
	created() {
		
	},
	methods: {
		//输入手机号
		next(phone) {
			
			if (!/^1[34578]\d{9}$/.test(phone)) {
				uni.showToast({
					title: '请输入正确的手机号',
					icon: 'none'
				});
			} else {
				uni.request({
					url: `http://60.205.202.107:39500/treat/terminal/v1/user/check/phone`,
					method: 'POST',
					header: {
						'content-type': 'application/x-www-form-urlencoded; charset=UTF-8'
					},
					data: {
						phone: this.phone
					},
					success: res => {
						if (res.data.code == '200') {
							this.step = '1';
							// 转换截取字符串
							var disName = `${phone}` ;
							this.afterPhone = disName.substring(disName.length-4,disName.length);
						} else {
							uni.showToast({
								title: res.data.msg,
								icon: 'none'
							});
						}
					}
				});
			}
		},
		// 更新
		toUpdates(i) {
			if (i == 0) {
				this.coedText = 0;
			} else {
				this.coedText = i;
			}
		},
		// 计时器
		setIntervals() {
			const that = this;
			var i = 60;
			clearInterval(repeat);
			var repeat = setInterval(function() {
				i--;
				// console.log(i);
				if (i == 0) {
					clearInterval(repeat);
					that.toUpdates(i);
				} else {
					that.toUpdates(i);
				}
			}, 1000);
		},
		// 获取验证码
		getCode() {
			if (this.coedText == 0) {
				// 请求
				uni.request({
					url: `http://60.205.202.107:39500/treat/terminal/v1/user/send/recallCode`,
					method: 'POST',
					header: {
						'content-type': 'application/x-www-form-urlencoded; charset=UTF-8'
					},
					data: {
						phone: this.phone
					},
					success: res => {
						if (res.data.code == '200') {
							uni.showToast({
								title: '验证码发送成功',
								icon: 'none'
							});
							this.isNext = true;
						} else {
						}
					}
				});
				this.setIntervals();
			}
		},
		// 重置密码
		confirmCode(n) {
			if (n) {
				if (this.code != '') {
					this.isNext = true;
				} else {
					this.isNext = false;
				}
				uni.showToast({
					title: '请先输入验证码',
					icon: 'none'
				});
			}
			uni.request({
				url: `http://60.205.202.107:39500/treat/terminal/v1/user/reset/pwd`,
				method: 'POST',
				header: {
					'content-type': 'application/x-www-form-urlencoded; charset=UTF-8'
				},
				data: {
					code: this.code,
					password: this.password,
					phone: this.phone
				},
				success: res => {
					if (res.data.code == '200') {
						this.step = '2';
					} else {
						uni.showToast({
							title: res.data.msg,
							icon: 'none'
						});
					}
				}
			});
		},
		// 返回
		toReturn() {
			uni.reLaunch({
				url: './login'
			});
		}
	}
};
</script>

<style lang="scss" scoped>
page {
	display: flex;
	background: #f5f6fa;
}
.forgetPwd {
	margin: auto;
	.step {
		width: 1200px;
		height: 780px;
		background: rgba(255, 255, 255, 1);
		overflow: hidden;
		.step-title {
			height: 42px;
			font-size: 42px;
			font-family: SourceHanSansCN-Regular, SourceHanSansCN;
			font-weight: 400;
			color: rgba(51, 51, 51, 1);
			line-height: 42px;
			margin: 60px 0 0 53px;
		}
		.step-box {
			width: 100%;
			margin: 166px auto 0 auto;
			.step-box-cont {
				width: 580px;
				font-size: 20px;
				font-family: SourceHanSansCN-Regular, SourceHanSansCN;
				font-weight: 400;
				color: rgba(51, 51, 51, 1);
				line-height: 30px;
				margin: 0 auto;
			}
			.step-box-inputBox {
				position: relative;
				width: 578px;
				font-size: 24px;
				line-height: 24px;
				margin: 80px auto 0 auto;
				.step-box-input {
					font-size: 24px;
					line-height: 24px;
					width: 578px;
				}
				text {
					position: absolute;
					top: 0;
					right: 0;
					color: #ff901e;
					cursor: pointer;
				}
			}
			.step-box-inputBox:after {
				content: '';
				position: absolute;
				left: 0;
				bottom: -16px;
				width: 100%;
				height: 2px;
				background-color: #dfe4ed;
				z-index: 1;
			}
			.step-box-btn {
				margin: 244px auto 0 auto;
				width: 288px;
				height: 57px;
			}
			// 重置成功
			.step-img {
				width: 131px;
				height: 131px;
				border-radius: 50%;
				margin: 0 auto;
				display: block;
			}
			.step-text {
				width: 100%;
				height: 40px;
				font-size: 40px;
				font-family: PingFangSC-Regular, PingFang SC;
				font-weight: 400;
				color: rgba(51, 51, 51, 1);
				line-height: 40px;
				margin-top: 80px;
				text-align: center;
			}
			.step-box-btnn {
				margin: 167px auto 0 auto;
			}
		}
	}
	// 页面公共样式
	// 占位符
	.occupy {
		width: 100%;
		height: 60px;
	}
	.blue {
		margin: 0 5px;
	}
}
</style>
